<script setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
import axios from "axios";
import conf from "@/conf/conf";
const password = ref("");
const confirmPassword = ref("");

const changePassword = () => {
  if (password.value === confirmPassword.value) {
    // TODO: 调用接口修改密码
    axios({
      url: conf.url+"/pwd",
      method: "patch",
      params: {
        pwd: password.value,
      },
    })
      .then((res) => {
          if (res.data.code === 0) {
              ElMessage({type: "success", message: "密码修改成功"});
        } else {
            ElMessage({ type: "error", message: "密码修改失败" });
        }
      })
      .catch((err) => {
        console.log(err);
      });
  } else {
      ElMessage({ type: "error", message: "两次输入的密码不一致，请重新输入" });
  }
};
</script>
<template>
  <div class="password">
    <h1>密码修改</h1>
    <span>输入密码:</span
    ><el-input
      class="password-input"
      type="password"
      v-model="password"
      placeholder="请输入密码"
    /><br />
    <span>确认密码:</span
    ><el-input
      class="password-input"
      type="password"
      v-model="confirmPassword"
      placeholder="请确认密码"
    /><br />
    <el-button type="primary" @click="changePassword">修改密码</el-button>
  </div>
</template>
<style scoped>
.password {
  margin: auto;
  width: 50%;
  padding: 20px;
  text-align: center;
}
h1 {
  margin-top: 50px;
  font-size: 30px;
  font-weight: bold;
  color: #333;
}
.password-input {
  width: 300px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-button {
  width: 150px;
  margin-top: 20px;
}
span {
  display: inline-block;
  width: 100px;
  text-align: right;
  margin-right: 10px;
}
</style>
